<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作样式</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
            color: greenyellow;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid red;" id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
    <input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
    <br><br><br>
    <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.css(name)   获取css样式
       $("#btn1").click(function () {
           console.log($("#div").css("broder"));
       })

    // 2.css(name,value)   设置CSS样式
      $("#btn2").click(function () {
         // $("#div").css("backgroundColor","blue");
         // $("#div").css("backgroundColor","blue");
        //背景为粉色,字体大小为50px
          $("#div").css({"backgroundColor":"pink","fontSize";"50px"});
      })

    // 3.addClass(value)   给指定的对象添加样式类名
    // 4.removeClass(value)  给指定的对象删除样式类名
    // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
</script>
</html>